<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ad{
            width:150px ;
            height: 200px;
            background-color: yellow;
            position: fixed;
            right: 0;
            bottom: -200px;
            transition: all 2s;
        }
        .del{
            display: none;
        }
    </style>
</head>
<body>
    <div id="ad">
        <p> <span id="time">15</span>秒之后自动关系 <span class="cancel">X</span> </p>
        <h2>小广告内容</h2>
    </div>

    <script>
        let ad=document.getElementById("ad");
        let time=document.getElementById("time");
        let cancel=document.getElementsByClassName("cancel")[0];
        // 页面加载事件
        window.onload=function(){
            ad.style.bottom=0+"px";
        }
        // 倒计时
        let i=15;
        let stop=setInterval(function(){
            time.innerText=--i;
            if(i==0){
                clearInterval(stop);
                // ad.classList.add("del");
                ad.className="del";
            }
            

        },1000);
        // 点击关闭
        cancel.onclick=function(){
            ad.className="del";
        }



    </script>
</body>
</html>